<template>
  <div class="index-header">
    <img src="../../../static/logo.fe46111.fe46111.png" class="header-img"/>
    <div class="index-catalog">
      <a href="#" @click="toIndex"><i class="iconfont">&#xe699;</i>&nbsp;首页</a>
      <a href="#"><i class="iconfont">&#xe610;</i>&nbsp;热点</a>
      <a href="#"><i class="iconfont">&#xe616;</i>&nbsp;时间轴</a>
      <span>
        <el-input v-model="input" placeholder="请输入搜索内容" suffix-icon="el-icon-search" ></el-input>
      </span>
    </div>

    <!-- 未登录的时候 -->
    <div v-show="!this.isLogin" style="display: flex;justify-content: flex-start;align-items: center;">
      <el-button type="success" plain round @click="toLogin()">登录</el-button>
      <el-button type="warning" plain round @click="toRegister()">注册</el-button>
    </div>
    <!-- 登录成功以后 -->
    <div v-show="this.isLogin" class="index-avatar">
<!--      <a href="/user/center"  @click="toUserCenter()" style="display: flex;justify-content: center;">
        <el-avatar :src="this.avatar" size="large"></el-avatar>
      </a> -->
      <a  @click="toUserCenter()" style="display: flex;justify-content: center;">
        <el-avatar :src="this.avatar" size="large"></el-avatar>
      </a>
    </div>
  </div>
</template>

<script>
  import mixins from "@/mixins.js"
  export default {
    mixins:[mixins],
    data(){
      return{
        // isLogin:false,
        isShow: false,
        input:'',
        avatar:"https://s1.ax1x.com/2020/05/22/YX18dx.jpg"
      }
    },
    methods:{
      adaptiveScreen() {
        let fullWidth = document.body.clientWidth
        if(fullWidth < 1000){
          this.isShow = true
        } else {
          this.isShow =false
        }
      },
      toLogin(){
        this.$router.push({
          path:"/user/login"
        })
      },
      toRegister(){
        this.$router.push({
          path:"/user/register"
        })
      },
      toIndex(){
        this.$router.push({
          path:"/"
        })
      },
      toUserCenter(){
        this.$router.push({
          path:"/user/card"
        })
      }
    },
    created() {
      window.addEventListener('resize', this.adaptiveScreen)

      // 更新头像
      this.avatar = this.UserInfo.avatar
      // 刷新头像
      var timer = setInterval(() => {
        this.avatar = JSON.parse(localStorage.getItem("UserInfo")) ? JSON.parse(localStorage.getItem("UserInfo")).avatar : '';
      },1000)

    },
    beforeDestroy() {
      window.removeEventListener('resize',this.adaptiveScreen)
    }
  }
</script>

<style scoped="scoped" lang="less">
  .index-header {
    height: 60px;
    // margin: 0 5%;
    border-bottom: 0.05rem solid #EBEEF5;
    display: flex;
    color: #555;
    justify-content: space-around;
  }
  .header-img {
    height: 100%;
  }
  .index-catalog {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .index-catalog span {
    display: block;
    // width: 30px;
    font-size: 16px;
    // font-weight: 550;
    margin:  5px;
    padding: 0px 10px;
    height: 100%;
    line-height: 60px;

  }
  .index-catalog a {
    display: block;
    // width: 30px;
    font-size: 16px;
    // font-weight: 550;
    color: #555;
    margin:  5px;
    padding: 0px 10px;
    height: 100%;
    line-height: 60px;

  }
  // .index-catalog span:nth-child(4){
  //   margin: 5px 50px;
  // }
  .index-catalog a:nth-child(-n+3):hover{
    color: #F47023;
    background-color: floralwhite;
    font-size: 16px;
    border-bottom: 2px solid #F47023;
  }
  .index-avatar{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
